<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">角色列表
        </div>
        <div class="layui-card-body">
          <div class="layui-card-header">
            <a href="#/role/input" class="layui-btn layui-btn-sm">
              <i class="layui-icon">&#xe654;</i>
              <span>新增</span>
            </a>
            <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" id="search_hash">
              <i class="layui-icon">&#xe615;</i>
              <span>搜索</span>
            </a>
          </div>
          <div class="layui-card-body">
            <table id="demo_hash" lay-filter="test_hash"></table>
            <script type="text/html" id="barDemo_hash">
              <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-xs" lay-event="opt">权限分配</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="search_tpl_hash">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">角色名称</label>
      <div class="layui-input-block">
        <input type="text" name="roleName" placeholder="请输入角色名称.." autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色代码</label>
        <div class="layui-input-block">
          <input type="text" name="roleCode" placeholder="请输入角色代码.." autocomplete="off" class="layui-input">
        </div>
      </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo_hash"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>

<script>
  layui.config({
    base: 'js/'
  }).use(['jquery', 'mockjs', 'table', 'sidebar', 'form', 'api', 'route'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      api = layui.api,
      route = layui.route,
      form = layui.form;
    table.render({
      id: 'table0',
      method: 'get',
      limit: 10,
      elem: '#demo_hash',      
      toolbar: false,
      height: 'full-235',
      url: api.role.tableDate, //数据接口
      headers: {
        'X-TOKEN' : localStorage.getItem('X-TOKEN')
      },
      page: true, //开启分页
      cols: [
        [ //表头
          {
            field: 'roleName',
            title: '角色名称',
            width: 180
          }, {
            field: 'roleCode',
            title: '角色代码',
            width: 180,
            sort: true
          }, {
            field: 'description',
            title: '描述',
            width: 180
          }, {
            fixed: 'right',
            align: 'center',
            toolbar: '#barDemo_hash'
          }
        ]
      ]
    });

    //监听事件
    //监听工具条
    table.on('tool(test_hash)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      console.log(obj);
    
      if(layEvent === 'detail'){ //查看
        layer.msg(JSON.stringify(obj.data));
      } else if(layEvent === 'del'){ // 删除
        layer.confirm('确定删除吗？', function(index){
          axios.get(api.role.remove + '/' + obj.data.id, {
            headers: {
              'X-TOKEN': localStorage.getItem('X-TOKEN')
            }
          }).then(resp => {
            if (resp.data.success === true) {
              // 删除成功
              layer.msg(resp.data.msg);
              table.reload('table0', {
                url: api.role.tableDate
                ,where: {} //设定异步数据接口的额外参数
                //,height: 300
              });
            } else {
              // 删除失败
              layer.alert(resp.data.msg);
            }
          });

        });
      } else if(layEvent === 'edit'){ //编辑
        location.href = '#/role/input?id=' + obj.data.id;
      } else if(layEvent === 'opt') {
        location.href = '#/role/opt?id=' + obj.data.id;
      }
    });

    $('#search_hash').on('click', function () {
      var that = this;
      // console.log($('#search_tpl_hash').html());
      sidebar.render({
        elem: that,
        content: $('#search_tpl_hash').html(),
        title: '搜索',
        shade: true,
        // shadeClose:false,
        // direction: 'left'
        // dynamicRender: false,
        // url: 'views/member/all/search.html',
        width: '500px', //可以设置百分比和px
        done: function () {
          console.log('ccc');
          form.render();

          //监听提交
          form.on('submit(formDemo_hash)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            table.reload('table0', {
              where: data.field
            });
            return false;
          });
        }
      });
    });
  });
</script>

<style scoped>

</style>